//弹出错误
function Errorreport(errormessage) {
	this.$notify.error({
		title: 'error',
		message: errormessage,
	});
}
//项目组件
Vue.component('story_overview', {
	template: `<div style="width: 800px; height: 640px; margin-left: 15%; margin-top: 100px;" id="etpm"> 
		<div style="width: 800px; height: 640px;" id="etpx" ref="etpx"> 
		<h2 style="text-align: center;">{{form.ftitle}}</h2> 
		<p style="text-align: center; color: #303133;">作者：{{form.fauthor}}</p> 
		<div style="width: 800px; height: 300px; background-color: #303133; word-wrap:break-word;"> 
		<p style="color: #fff; font-size: 15px; line-height: 40px;">{{form.fcontent}}</p<ul id="menu"> 
		</div> 
		<table width="800" border="0" style="font-size: 20px; line-height: 40px;"> 
		<tbody> 
		<tr> 
		<td>角色数量：{{form.frolenum}}</td> 
		<td>事件数量：{{form.feventnum}}</td> 
		<td>地址数量：{{form.faddressnum}}</td> 
		</tr> 
		<tr> 
		<td>阵营数量：{{form.fcampnum}}</td> 
		<td>线索数量：{{form.fcluenum}}</td> 
		<td>道具数量：{{form.fpropnum}}</td> 
		</tr> 
		</tbody> 
		</table> 
		<el-button type="info" plain style="margin-left:40%; margin-top:40px;" @click="Editing_the_profile()">编辑简介</el-button> 
		</div> 
		<div style="width: 800px; height: 737px; display: none;" id="etp" ref="etp"> 
		<el-form :model="form" label-width="80px" :rules="rules"> 
		<el-form-item prop="ftitle"> 
		<el-input v-model="form.ftitle" maxlength="20" minlength="0" show-word-limit clearable></el-input> 
		</el-form-item> 
		<el-form-item prop="fauthor"> 
		<el-input v-model="form.fauthor" maxlength="20" minlength="0" show-word-limit clearable></el-input> 
		</el-form-item> 
		<el-form-item prop="fcontent" maxlength="371" minlength="0" show-word-limit clearable> 
		<el-input type="textarea" v-model="form.fcontent" style="font-size: 20px;" :rows="7"></el-input> 
		</el-form-item> 
		<el-button type="primary" style="margin-left: 40%;" round @click="CMP()">完成</el-button><el-button type="primary" @click="socancel()" round>取消</el-button> 
		</el-form> 
		</div> 
		<div id="Nstory" style="display: none;" ref="Nstory"> 
		<h2 style="text-align: center;">新建故事</h2> 
		<el-form :model="form2" :rules="rules2"> 
		<el-form-item prop="ftitlet" label-width="80px" label="故事标题" style="background-color: #fff;"> 
		<el-input v-model="form2.ftitle" maxlength="20" minlength="0" show-word-limit clearable></el-input> 
		</el-form-item> 
		<el-button type="primary" round style="margin-left: 45%;" @click="newstory()">新建</el-button> 
		</el-form> 
		</div> 
		<div id="OPstory" style="display: none;" ref="OPstory"> 
		<h2 style="text-align: center;">打开故事</h2> 
		<el-table :data="ftabledata" style="width: 100%" height="550"> 
		<el-table-column prop="title" label="标题" width="620"> 
		</el-table-column> 
		<el-table-column prop="operation" label="操作" width="180"> 
		<template slot-scope="scope"> 
		<el-button type="primary" icon="el-icon-edit" circle @click="openstory(scope.row)"></el-button> 
		<el-button type="danger" icon="el-icon-delete" circle></el-button> 
		</template> 
		</el-table-column> 
		</el-table> 
		</div> 
		</div>`,
	props: {
		tabledata: [], //初始数据
		token: '', //token令牌
	},
	data() {
		return {
			ftabledata: [], //故事列表
			//故事数据
			form: {
				fid: '',
				ftitle: '',
				fauthor: '',
				fcontent: '',
				frolenum: '',
				feventnum: '',
				faddressnum: '',
				fcampnum: '',
				fcluenum: '',
				fpropnum: '',
			},
			//新建故事数据
			form2: {
				ftitle: '',
			},
			//修改故事验证规则
			rules: {
				ftitle: [{
						min: 0,
						max: 20,
						message: '最长20个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文、数字、和中文标点符号!',
						trigger: 'change'
					},
				],
				fauthor: [{
						min: 0,
						max: 20,
						message: '最长20个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文、数字、和中文标点符号!',
						trigger: 'change'
					},
				],
				fcontent: [{
						min: 0,
						max: 371,
						message: '最长371个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文、数字、和中文标点符号!',
						trigger: 'change'
					},
				],

			},
			//新建故事验证规则
			rules2: {
				ftitlet: [{
						min: 0,
						max: 20,
						message: '最长20个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文、数字、和中文标点符号!',
						trigger: 'change'
					},
				],
			}
		}
	},
	/*重要固定写法，删除数据不能更新！*/
	watch: {
		id: function(newval) {
			this.form.fid = newval;
		},
		title: function(newval) {
			this.form.ftitle = newval;
		},
		author: function(newval) {
			this.form.fauthor = newval;
		},
		content: function(newval) {
			this.form.fcontent = newval;
		},
		tabledata: function(newval) {
			this.ftabledata = newval;
		}
	},
	//组件方法
	methods: {
		//打开编辑简介
		Editing_the_profile() {
			this.$refs.etp.style.display = "block";
			this.$refs.etpx.style.display = "none";
			this.$refs.Nstory.style.display = "none";
		},
		//关闭编辑简介
		socancel() {
			this.$refs.etp.style.display = "none";
			this.$refs.etpx.style.display = "block";
			this.$refs.Nstory.style.display = "none";
		},
		//编辑简介方法
		CMP() {
			//过滤数据用以校验
			var ptitle = this.form.ftitle.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g,
				"");
			var pauthor = this.form.fauthor.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g,
				"");
			var pcontent = this.form.fcontent.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g,
				"");
			/*
				校验合法性
				成功提交修改
				失败返回错误提示
			*/
			if (ptitle === "" && pauthor === "" && pcontent === "") {
				axios.post('./api/Controller.php?ac=ITE&token=' + this.$props.token + '', {
						id: this.form.fid,
						title: this.form.ftitle,
						author: this.form.fauthor,
						content: this.form.fcontent,
					})
					.then(response => {
						console.log(response.data)
						this.$notify.success({
							title: '成功',
							message: '修改成功！'
						});
						this.$refs.etp.style.display = "none";
						this.$refs.etpx.style.display = "block";
						this.$refs.Nstory.style.display = "none";
						this.ftabledata = [];
						this.ftabledata = response.data[0];
						this.$emit('update:token', response.data[1]);
						//数据双向绑定
						//this.$emit('update:token', response.data);
					})
					.catch(function(error) {
						console.log(error);
					});
			} else {
				this.$notify.error({
					title: '错误',
					message: '修改内容不符合规定！'
				});
			}
		},
		//新建故事
		newstory() {
			if (this.form2.ftitle != '') {
				//过滤数据，用以校验
				var ftitle = this.form2.ftitle.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g, "");
				/*
				 * 进行校验
				 * 成功进行提交
				 * 失败返回
				 */
				if (ftitle === "") {
					axios.post('./api/Controller.php?ac=NEW&token=' + this.$props.token + '', {
							title: this.form2.ftitle,
						})
						.then(response => {
							this.$emit('update:token', response.data.token);
							this.form.fid = response.data.storyid;
							this.$notify({
								title: '成功',
								message: '新建成功！',
								type: 'success'
							});
							//更新故事列表
							axios.get('./api/Controller.php?ac=BS&token=' + this.token + '')
								.then(response => {
									this.form2.ftitle = '';
									this.$emit('update:token', response.data.pop());
									this.ftabledata = response.data
									this.$refs.etp.style.display = "none";
									this.$refs.etpx.style.display = "none";
									this.$refs.Nstory.style.display = "none";
									this.$refs.OPstory.style.display = "block";
								})
								.catch(function(error) {
									console.log(error);
								});

						})
						.catch(function(error) {
							console.log(error);
						});
				} else {
					this.$notify.error({
						title: '错误',
						message: '包含非法字符！'
					});
				}
			} else {
				this.$notify.error({
					title: '错误',
					message: '不能为空！'
				});
			}
		},
		//更新故事数据
		openstory: function(row) {
			this.form.fid = row.id;
			this.form.ftitle = row.title;
			this.form.fauthor = row.author;
			this.form.fcontent = row.content;
			this.form.frolenum = row.rolenum;
			this.form.feventnum = row.eventnum;
			this.form.faddressnum = row.addressnum;
			this.form.fcampnum = row.campnum;
			this.form.fcluenum = row.cluenum;
			this.form.fpropnum = row.propnum;
			this.$refs.etp.style.display = "none";
			this.$refs.etpx.style.display = "block";
			this.$refs.Nstory.style.display = "none";
			this.$refs.OPstory.style.display = "none";
			this.$emit("backid", this.form.fid);
			this.$store.commit('updatastoryid', this.form.fid);
		}
	}
})
/*
 * 角色组件
 */
Vue.component('role_module', {
	template: `<div style="width: 100%; height: 705px; margin-top: 0px; display: none;" id="rmm">
		<div style="width: 600px; height: 700px; margin-left: 5%;" id="rmx" ref="rmx">
		<h2 style="text-align: left;">角色总览</h2>
		<p style="text-align: left;">总数{{ronum}}个</p>
		<el-table @current-change="show_details" ref="show_details" show-overflow-tooltip="true" :row-class-name="returnindex" :data="tableData" style="width: 600px;" height="500px">
		<el-table-column type="index" label="ID" width="50">
		</el-table-column>
		<el-table-column prop="name" label="角色" width="60">
		</el-table-column>
		<el-table-column prop="sex" label="性别" width="60">
		</el-table-column>
		<el-table-column prop="lead" label="主角" width="50">
		</el-table-column>
		<el-table-column prop="atsg" label="常言" width="240">
		</el-table-column>
		<el-table-column label="操作">
		<template slot-scope="scope">
		<el-button type="primary" icon="el-icon-edit" @click="editrole(scope.row)" circle></el-button>
		<el-button type="danger" icon="el-icon-delete" @click="deleterole" circle></el-button>
		</template>
		</el-table-column>
		</el-table>
		<el-button type="primary" @click="newrole" ref="newrolebutton" style="margin-top: 20px;">新建角色</el-button>
		<el-button type="primary" @click="addrelationship" ref="addrelationshipbutton" style="margin-top: 20px;">添加关系</el-button>
		<el-button type="primary" @click="addattribute" ref="addattributebutton" style="margin-top: 20px;">添加属性</el-button>
		</div>
		<div id="role_details" ref="role_details" style="margin-left: 60%; width: 400px; margin-top: -710px; height: 618px;  color: #fff;">
		<p style="width: 100px; margin: 0; float: right; position: relative; top: 20px;">ID：{{id}}</p>
		<p style="width: 200px; margin: 0; float: left; margin-top: 20px; margin-left:20px;">名称：{{name}}</p>
		<p style="width: 100px; margin: 0; float: left; position: relative; left: -200px; top: 60px;">性别：{{sex}}</p>
		<p style="width: 150px; margin: 0; float: left; position: relative; left: 200px; top: 40px;">生日：{{birthday}}</p>
		<p style="width: 150px; margin: 0; float: left; position: relative; left: -130px; top: 80px;">阵营：{{camp}}</p>
		<p style="width: 370px; margin: 0; float: left; position: relative; left: 20px; top: 100px;">常言：{{atsg}}</p>
		<p style="width: 100px; margin: 0; float: left; position: relative; left: 20px; top: 120px; width: 370px;">备注：{{remark}}</p>
		<p style="width: 100px; margin: 0; float: left; position: relative; left: 20px; top: 140px; width: 370px;">关系：</p>
		<el-table row-key="id"  highlight-current-row ref="relationshiptable" :data="tableData2" @current-change="editrelationship" style="width: 300px;  position: relative; left: 70px; top: 120px;" height="170">
		<el-table-column prop="role_relationship" label="关系">
		</el-table-column>
		<el-table-column prop="name" label="角色">
		</el-table-column>
		</el-table>
		<p style="width: 100px; margin: 0; float: left; position: relative; left: 20px; top: 170px; width: 370px;">属性：</p>
		<el-table row-key="id" highlight-current-row  @current-change="editattribute" :data="tableData3" style="width: 300px;  position: relative; left: 70px; top: 150px;"height="170px">
		<el-table-column type="index" label="ID" width="50">
		</el-table-column>
		<el-table-column prop="property_name" label="属性名" width="100" :show-overflow-tooltip="true">
		</el-table-column>
		<el-table-column prop="content" label="内容" :show-overflow-tooltip="true">
		</el-table-column>
		</el-table>
		</div>
		<div ref="newrole" id="newrole" style="width: 500px; height: 540px; display: none; position: relative; left: 20%; top: 30px;">
		<h2 style="flort: left;">新建角色</h2>
		<el-form ref="form" :model="form" label-width="80px"style="background: #fff; height: 540px;" :rules="rules">
		<el-form-item label="姓名："style="width: 200px; margin: 0; margin-right: 10px; position: relative; top: 20px; width:250px;" prop="name">
		<el-input v-model="form.name" style="width:150px;" maxlength="6" minlength="0" show-word-limit clearable></el-input>
		</el-form-item>
		<el-form-item label="主角："style="position: relative; left: 45%; top: -20px;">
		<el-switch v-model="form.lead" ></el-switch>
		</el-form-item>
		<el-form-item label="生日：" style="margin-top:-20px;">
		<el-date-picker
		      v-model="form.birthday"
		      type="date"
			  value-format="yyyy-MM-dd"
		    placeholder="生日"
			style="width: 150px;">
		</el-date-picker>
		</el-form-item>
		<el-form-item label="性别：">
		<el-select v-model="form.sex" placeholder="请选择性别" style="width: 150px;">
		<el-option label="男" value="男"></el-option>
		<el-option label="女" value="女"></el-option>
		</el-select>
		</el-form-item>
		<el-form-item label="阵营：">
		<el-select v-model="form.camp" placeholder="无" style="width: 150px;" >
		<el-option label="无" value=""></el-option>
		<el-option
		v-for="item in options"
		:key="item.id"
		:label="item.campname"
		:value="item.id">
		</el-option>
		</el-select>
		</el-form-item>
		<el-form-item label="常言：" prop="atsg">
		<el-input v-model="form.atsg" style="width: 150px;" maxlength="50" minlength="0" show-word-limit clearable></el-input>
		</el-form-item>
		<el-form-item label="备注：" prop="remarks">
		<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form.remarks"
		style="width: 300px;" maxlength="100" minlength="0" show-word-limit clearable>
		</el-input>
		</el-form-item>
		<el-button type="primary" @click="submit_new_role" style="position: relative; left: 100px; top: 0px;">完成</el-button><el-button type="primary" style="position: relative; left: 140px; top: 0px;" @click="returnrole">返回</el-button>
		</el-form>
		</div>
		<div id="addrelationship" ref="addrelationship" style="position:absolute; height:300px; width:300px; border:1px solid black; top:40px; left:45%; display:none; background:#fff;">
		<h2 style="margin-left: 20px;">添加关系</h2>
		<el-form ref="form2" :model="form2" label-width="80px"style="background: #fff; height: 300px; margin-top:20px;" :rules="rules2">
		<el-form-item label="关系：" prop="relationship">
		<el-input v-model="form2.relationship" style="width: 150px;" maxlength="6" minlength="0" show-word-limit clearable></el-input>
		</el-form-item>
		<el-form-item label="角色：" prop="to_who">
		<el-select v-model="form2.to_who" placeholder="无" style="width: 150px;" >
		<el-option label="无" value=null></el-option>
		<el-option
		v-for="item in options2"
		:key="item.id"
		:label="item.name"
		:value="item.id">
		</el-option>
		</el-select>
		</el-form-item>
		<el-button type="primary" @click="submit_relationship" style="position:absolute; left:20%;">完成</el-button><el-button type="primary" style="position: relative; left: 140px; top: 0px;" @click="returnrelationship">返回</el-button>
		</el-form>
		</div>
		<div id="editrelationship" ref="editrelationship" style="position:absolute; border:1px solid black; width: 350px;height: 100px; top: 20%; left:45%; display: none;">		
		<el-form ref="form3" :model="form3" label-width="80px"style="background: #fff; height: 200px;" :rules="rules3">
		<p style="position:relative; top: 40px; margin-left: 25px; margin-bottom: 0px; margin-top: 0px; font-size:14px; color:#606266;">名称：{{form3.name}}</p>
		<el-form-item label="关系：" prop="relationship" style="margin-top: 60px;" >
		<el-input v-model="form3.relationship" style="width: 150px;"  maxlength="6" minlength="0" show-word-limit clearable></el-input>
		</el-form-item>
		<el-button type="primary" @click="submiteditrelationship" style="position:relative; left:10%;">完成</el-button><el-button type="primary" style="position: relative; left: 15%; top: 0px;" @click="returnrelationship">返回</el-button><el-button type="danger" style="position: relative; left: 20%; top: 0px;" @click="deleterelationship"  icon="el-icon-delete" circle></el-button>
		</el-form>
		</div>
		<div id="editattribute" ref="editattribute" class="editattribute">
		<h2 style="margin-left: 20px;">编辑属性</h2>
		<el-form ref="form5" class="form5" :model="form5" label-width="80px" :rules="rules5">
		<el-form-item label="属性名：" prop="attributename" style="margin-top: 60px;">
		<el-input v-model="form5.attributename" style="width: 150px;" maxlength="6" minlength="0" show-word-limit clearable></el-input>
		</el-form-item>
		<el-form-item label="内容：" prop="content" style="margin-top: 60px;">
		<el-input type="textarea" v-model="form5.content" style="width: 200px;" :rows="4" maxlength="50" minlength="0" show-word-limit clearable></el-input>
		</el-form-item>
		<el-button type="primary" @click="submiteditattribute" style="position:relative; left:10%;">完成</el-button><el-button type="primary" style="position: relative; left: 15%; top: 0px;" @click="returnattribute">返回</el-button><el-button type="danger" style="position: relative; left: 20%; top: 0px;" @click="deleteattribute"  icon="el-icon-delete" circle></el-button>
		</el-form>
		</div>
		<div id="editrole" ref="editrole" class="editrole">
		<h2 style="flort: left;">编辑角色</h2>
		<el-form ref="form4" :model="form4" class="form4" label-width="80px" :rules="rules4">
		<el-form-item label="姓名："style="width: 200px; margin: 0; margin-right: 10px; position: relative; top: 20px; width:250px;" prop="name">
		<el-input v-model="form4.name" style="width:150px;" maxlength="6" minlength="0" show-word-limit clearable></el-input>
		</el-form-item>
		<el-form-item label="主角："style="position: relative; left: 45%; top: -20px;">
		<el-switch v-model="form4.lead" ></el-switch>
		</el-form-item>
		<el-form-item label="生日：" style="margin-top:-20px;">
		<el-date-picker
		      v-model="form4.birthday"
		      type="date"
			  value-format="yyyy-MM-dd"
		    placeholder="生日"
			style="width: 150px;">
		</el-date-picker>
		</el-form-item>
		<el-form-item label="性别：">
		<el-select v-model="form4.sex" placeholder="请选择性别" style="width: 150px;">
		<el-option label="男" value="男"></el-option>
		<el-option label="女" value="女"></el-option>
		</el-select>
		</el-form-item>
		<el-form-item label="阵营：">
		<el-select v-model="form4.camp" placeholder="无" style="width: 150px;" >
		<el-option label="无" value=""></el-option>
		<el-option
		v-for="item in options3"
		:key="item.id"
		:label="item.campname"
		:value="item.id">
		</el-option>
		</el-select>
		</el-form-item>
		<el-form-item label="常言：" prop="atsg">
		<el-input v-model="form4.atsg" style="width: 150px;"  maxlength="50" minlength="0" show-word-limit clearable></el-input>
		</el-form-item>
		<el-form-item label="备注：" prop="remarks">
		<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form4.remarks"
		style="width: 300px;" maxlength="100" minlength="0" show-word-limit clearable>
		</el-input>
		</el-form-item>
		<el-button type="primary" @click="submiteditrole" style="position: relative; left: 100px; top: 0px;">完成</el-button><el-button type="primary" style="position: relative; left: 140px; top: 0px;" @click="editreturnrole">返回</el-button>
		</el-form>
		</div>
		<div id="addattribute" ref="addattribute" class="addattribute">
		<h2 style="margin-left: 20px;">添加属性</h2>
		<el-form ref="form5" :model="form5" label-width="80px"style="background: #fff; height: 200px; margin-top:20px;" :rules="rules5">
		<el-form-item label="属性名：" prop="attributename">
		<el-input v-model="form5.attributename" style="width: 150px;" maxlength="6" minlength="0" show-word-limit clearable></el-input>
		</el-form-item>
		<el-form-item label="内容：" prop="content">
		<el-input type="textarea" :rows="3" v-model="form5.content" style="width: 150px;" maxlength="50" minlength="0" show-word-limit clearable></el-input>
		</el-select>
		</el-form-item>
		<el-button type="primary" @click="submit_attribute" style="position:absolute; left:20%;">完成</el-button><el-button type="primary" style="position: relative; left: 140px; top: 0px;" @click.native="returnroleym">返回</el-button>
		</el-form>
		</div>
		</div>`,
	props: {
		tabledata: [],
		token: '',
		storyid: '',
	},
	data() {
		return {
			ronum: 0,
			tableData: [], //角色列表
			tableData2: [], //关系列表
			tableData3: [], //属性列表
			//start故事数据
			id: '',
			realid: '',
			name: '',
			sex: '',
			lead: '',
			remark: '',
			atsg: '',
			camp: '',
			event: '',
			place: '',
			birthday: '',
			attribute: '',
			//end
			//新建角色数据
			form: {
				name: '',
				lead: false,
				birthday: '',
				sex: '',
				camp: '',
				atsg: '',
				remarks: '',
				the_story: '',
			},
			//新建关系数据
			form2: {
				relationship: '',
				to_who: null,
			},
			//编辑关系数据
			form3: {
				id: '',
				name: '',
				relationship: '',
			},
			//编辑角色数据
			form4: {
				name: '',
				lead: false,
				birthday: '',
				sex: '',
				camp: '',
				atsg: '',
				remarks: '',
				the_story: '',
			},
			//添加属性数据
			form5: {
				id: '',
				attributename: '',
				content: '',
			},
			//新建角色提交状态
			modify_state: false,
			//修改角色提交状态
			modify_state2: false,
			//添加属性提交状态
			modify_state3: false,
			//start阵营下拉列表
			options: [],
			options2: [],
			options3: [],
			//end
			//新建角色验证规则
			rules: {
				name: [{
						required: true,
						message: "不能为空！",
						trigger: "change",
					}, {
						min: 0,
						max: 6,
						message: '最长6个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9]+$",
						message: '只能输入中文、英文、数字!',
						trigger: 'change'
					},
				],
				atsg: [{
						min: 0,
						max: 50,
						message: '最长50个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文、数字、和中文标点符号!',
						trigger: 'change'
					},
				],
				remarks: [{
						min: 0,
						max: 100,
						message: '最长100个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文、数字、和中文标点符号!',
						trigger: 'change'
					},
				],
			},
			//添加关系验证规则
			rules2: {
				relationship: [{
						required: true,
						message: "不能为空！",
						trigger: "blur",
					}, {
						min: 0,
						max: 6,
						message: '最长6个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z]+$",
						message: '只能输入中文、英文!',
						trigger: 'blur'
					},
				],
				to_who: [{
					required: true,
					message: "不能为空！",
					trigger: "blur",
				}, ],
			},
			//编辑关系验证规则
			rules3: {
				relationship: [{
						min: 0,
						max: 6,
						message: '最长6个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z]+$",
						message: '只能输入中文、英文!',
						trigger: 'change'
					},
				],
			},
			//编辑角色验证规则
			rules4: {
				name: [{
						required: true,
						message: "不能为空！",
						trigger: "change",
					}, {
						min: 0,
						max: 6,
						message: '最长6个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9]+$",
						message: '只能输入中文、英文、数字!',
						trigger: 'change'
					},
				],
				atsg: [{
						min: 0,
						max: 50,
						message: '最长50个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文、数字、和中文标点符号!',
						trigger: 'change'
					},
				],
				remarks: [{
						min: 0,
						max: 100,
						message: '最长100个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文、数字、和中文标点符号!',
						trigger: 'change'
					},
				],
			},
			//编辑属性验证规则
			rules5: {
				attributename: [{
						required: true,
						message: "不能为空！",
						trigger: "blur",
					}, {
						min: 0,
						max: 6,
						message: '最长6个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文，和中文标点符号!',
						trigger: 'blur'
					},
				],
				content: [{
						required: true,
						message: "不能为空！",
						trigger: "blur",
					}, {
						min: 0,
						max: 20,
						message: '最长50个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文，和中文标点符号!',
						trigger: 'blur'
					},
				],
			}
		}
	},
	/*重要固定写法，删除数据不能更新！*/
	watch: {
		tabledata: function(newval) {
			this.tableData = newval
			this.ronum = newval.length
		},
		storyid: function(newval) {
			this.form.the_story = newval
		}
	},
	methods: {
		/**
		 * 角色详情
		 * @param val 选中的角色基础信息
		 */
		show_details(val) {
			if (val != null) {
				this.name = val.name
				this.realid = val.id
				this.$store.commit('updataRroleid', val.id);
				if (val.index == undefined) {} else {
					this.id = val.index
				}
				this.sex = val.sex
				this.atsg = val.atsg
				axios.get('./api/Controller.php?ac=RD&token=' + this.$props.token + '&roleid=' + val.id + '')
					.then(response => {
						this.camp = response.data[0].camp
						this.remark = response.data[0].remarks
						this.birthday = response.data[0].birthday
						this.$emit('update:token', response.data.token)
						axios.get('./api/Controller.php?ac=RSTALODING&token=' + this.$props.token +
								'&roleid=' +
								val.id + '')
							.then(response => {
								this.$emit('update:token', response.data.pop());
								if (response.data[0][0].role_relationship == '') {
									this.tableData2 = []
								} else {
									this.tableData2 = response.data[0]
								}
								if (response.data[1][0].id == '') {
									this.tableData3 = []
								} else {
									this.tableData3 = response.data[1]
								}
							})
							.catch(function(error) {
								console.log(error);
							})
					})
					.catch(function(error) {
						console.log(error);
					})
			}
		},
		/*
		 * 返回选中的数据索引（element ui所需）
		 */
		returnindex({
			row,
			rowIndex
		}) {
			row.index = rowIndex + 1;
		},
		/*
		 * 打开新建角色
		 * 初始化阵营列表
		 */
		newrole() {
			if (this.$props.storyid == '') {
				this.$notify.error({
					title: '错误',
					message: '请先打开一个故事！'
				});
			} else {
				this.$refs.rmx.style.display = "none"
				this.$refs.role_details.style.display = "none"
				this.$refs.newrole.style.display = "block"
				this.$refs.addrelationship.style.display = "none"
				axios.get('./api/Controller.php?ac=newroleloding&token=' + this.$props.token +
						'&storyid=' +
						this.$props.storyid + '')
					.then(response => {
						this.options = response.data[0]
						this.$emit('update:token', response.data.pop());
					})
					.catch(function(error) {
						console.log(error);
					})
			}
		},
		/* 
		 * 提交新建角色
		 * 检验数据是否合法
		 * 更新数据
		 */
		submit_new_role() {
			if (this.form.name === '') {
				this.$notify.error({
					title: '错误',
					message: '姓名不能为空！'
				});
			} else {
				let name = this.form.name.replace(/^[\u4E00-\u9FA5A-Za-z0-9]+$/g,
					""); //过滤合法字符，留下非法字符用以下面进行校验
				let atsg = this.form.atsg.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g,
					""); //过滤合法字符，留下非法字符用以下面进行校验
				let remark = this.form.remarks.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g,
					""); //过滤合法字符，留下非法字符用以下面进行校验
				if (name === '' && atsg === '' && remark === '') {
					axios.post('./api/Controller.php?ac=newrole&token=' + this.$props.token + '', {
							data: this.form
						})
						.then(response => {
							this.$emit('update:token', response.data.pop());
							this.tableData = response.data[0]
							this.modify_state = true
							this.$notify({
								title: '成功',
								message: '新建成功！',
								type: 'success'
							});
							this.$refs.rmx.style.display = "block"
							this.$refs.role_details.style.display = "block"
							this.$refs.newrole.style.display = "none"
							this.form.atsg = ''
							this.form.birthday = ''
							this.form.camp = ''
							this.form.name = ''
							this.form.remarks = ''
							this.form.sex = ''
							this.ronum = this.ronum + 1;
							app.$children[2].$children[2].$children[0].form.frolenum = this.ronum
						})
						.catch(function(error) {
							console.log(error)
						})
				} else {
					this.$notify.error({
						title: '错误',
						message: '提交非法数据！'
					});
				}
			}
		},
		/* 
		 * 取消新建角色
		 * 检测是否有未保存的数据
		 */
		returnrole() {
			if (this.modify_state || this.form.atsg == '' && this.form.birthday == '' && this.form
				.camp == '' && this.form.name == '' && this.form.remarks == '' && this.form.sex == '') {
				this.$refs.rmx.style.display = "block"
				this.$refs.role_details.style.display = "block"
				this.$refs.newrole.style.display = "none"
				this.form.atsg = ''
				this.form.birthday = ''
				this.form.camp = ''
				this.form.name = ''
				this.form.remarks = ''
				this.form.sex = ''
				this.modify_state = false
			} else {
				this.$confirm('您可能有未保存的数据, 是否返回?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$refs.rmx.style.display = "block"
					this.$refs.role_details.style.display = "block"
					this.$refs.newrole.style.display = "none"
					this.form.atsg = null
					this.form.birthday = null
					this.form.camp = null
					this.form.name = null
					this.form.remarks = null
					this.form.sex = null
					this.modify_state = false
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消返回'
					});
				});
			}
			console.log(this.form)
		},
		/* 
		 * 打开新建关系
		 * 初始化角色列表
		 */
		addrelationship() {
			if (this.$props.storyid == '') {
				this.$notify.error({
					title: '错误',
					message: '请先打开一个故事！'
				});
			} else if (this.realid == '') {
				this.$notify.error({
					title: '错误',
					message: '请先选中一个角色！'
				});
			} else {
				this.$refs.rmx.style.display = "none"
				this.$refs.role_details.style.display = "none"
				this.$refs.newrole.style.display = "none"
				this.$refs.addrelationship.style.display = "block"
				axios.get(
						`./api/Controller.php?ac=addrelationshiploding&token=${this.$props.token}&the_story=${this.$props.storyid}`
					)
					.then(response => {
						this.$emit('update:token', response.data.pop());
						response.data[0].forEach((value, index) => {
							if (value['id'] == this.realid) {
								response.data[0].splice(index, 1)
							}
						})
						this.options2 = response.data[0];
					})
					.catch(function(error) {
						console.log(error)
					})
			}
		},
		/* 
		 * 提交新建关系
		 * 检测非法数据
		 * 更新数据
		 */
		submit_relationship() {
			if (this.form2.relationship == '' || this.form2.to_who == null) {
				this.$notify.error({
					title: '错误',
					message: '关系和角色不能为空！'
				});
			} else {
				let relationship = this.form2.relationship.replace(/^[\u4E00-\u9FA5A-Za-z]+$/g, "")
				if (relationship == "" && this) {
					axios.post(`./api/Controller.php?ac=addrelationship&token=${this.$props.token}`, {
							data: this.form2,
							roleid: this.realid,
						})
						.then(response => {
							if (response.data != false) {
								this.$emit('update:token', response.data.pop());
								this.tableData2 = []
								this.tableData2 = response.data
								this.$notify({
									title: '成功',
									message: '添加成功！',
									type: 'success'
								});
								this.form2.relationship = null
								this.form2.to_who = null
								this.$refs.rmx.style.display = "block"
								this.$refs.role_details.style.display = "block"
								this.$refs.newrole.style.display = "none"
								this.$refs.addrelationship.style.display = "none"
							} else {
								this.$notify.error({
									title: '错误',
									message: '不能重复添加关系！'
								});
							}
						})
						.catch(function(error) {
							console.log(error)
						})
				} else {
					this.$notify.error({
						title: '错误',
						message: '提交非法数据！'
					});
				}
			}
		},
		/*
		 * 取消新建关系
		 * 检测是否有未保存的数据
		 */
		returnrelationship() {
			if (this.form3.id == '' && this.form3.name == '' && this.form3.relationship == '') {
				this.form3.name = ''
				this.form3.id = ''
				this.form3.relationship = ''
				this.setCurrent();
				this.$refs.editrelationship.style.display = "none";
				this.$refs.rmx.style.display = "block"
				this.$refs.role_details.style.display = "block"
				this.$refs.newrole.style.display = "none"
				this.$refs.addrelationship.style.display = "none"
			} else {
				this.$confirm('您可能有未保存的数据, 是否返回?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.form3.name = ''
					this.form3.id = ''
					this.form3.relationship = ''
					this.setCurrent();
					this.$refs.editrelationship.style.display = "none";
					this.$refs.rmx.style.display = "block"
					this.$refs.role_details.style.display = "block"
					this.$refs.newrole.style.display = "none"
					this.$refs.addrelationship.style.display = "none"
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消返回'
					});
				});
			}
		},
		/*
		 * 打开编辑关系
		 * 初始化需要的编辑数据
		 */
		editrelationship(val) {
			if (val != null) {
				this.form3.id = val.id;
				this.form3.name = val.name;
				this.form3.relationship = val.role_relationship;
				this.$refs.editrelationship.style.display = "block";
				this.$refs.rmx.style.display = "none"
				this.$refs.role_details.style.display = "none"
				this.$refs.newrole.style.display = "none"
				this.$refs.addrelationship.style.display = "none"
			}
		},
		/* 
		 * 编号：ch-bug-1
		 * bug修复
		 * 修复某些不可预料的情况下会意外触发表格的事件
		 */
		setCurrent(row) {
			this.$refs.relationshiptable.setCurrentRow(row);
		},
		/*
		 * 提交编辑关系
		 * 检测非法数据
		 * 更新数据
		 */
		submiteditrelationship() {
			if (this.form3.relationship == '') {
				this.$notify.error({
					title: '错误',
					message: '不能为空！'
				});
			} else {
				let relationship = this.form3.relationship.replace(/^[\u4E00-\u9FA5A-Za-z]+$/g, "")
				if (relationship == "") {
					axios.post(
							`./api/Controller.php?ac=updatarelationship&token=${this.$props.token}&id=${this.form3.id}&roleid=${this.realid}`, {
								relationship: this.form3.relationship
							})
						.then(response => {
							if (response.data) {
								this.$emit('update:token', response.data.pop());
								this.tableData2 = [];
								this.tableData2 = response.data;
								this.setCurrent();
								this.$notify({
									title: '成功',
									message: '修改成功！',
									type: 'success'
								});
								this.$refs.editrelationship.style.display = "none";
								this.$refs.rmx.style.display = "block"
								this.$refs.role_details.style.display = "block"
								this.$refs.newrole.style.display = "none"
								this.$refs.addrelationship.style.display = "none"
							} else {
								this.$notify.error({
									title: '错误',
									message: '不能为空！'
								});
							}

						})
						.catch(function(error) {
							console.log(error)
						})
				} else {
					this.$notify.error({
						title: '错误',
						message: '提交非法数据！'
					});
				}
			}
		},
		/*
		 * 删除关系
		 * 二次确认
		 */
		deleterelationship() {
			this.$confirm('确定删除这条关系?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				axios.get(
						`./api/Controller.php?ac=deleterelationship&token=${this.$props.token}&id=${this.form3.id}&roleid=${this.realid}`
					)
					.then(response => {
						this.$emit('update:token', response.data.pop());
						this.tableData2 = [];
						this.tableData2 = response.data;
						this.setCurrent();
						this.$notify({
							title: '成功',
							message: '删除成功！',
							type: 'success'
						});
						this.$refs.editrelationship.style.display = "none";
						this.$refs.rmx.style.display = "block"
						this.$refs.role_details.style.display = "block"
						this.$refs.newrole.style.display = "none"
						this.$refs.addrelationship.style.display = "none"
					})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '取消删除'
				});
			});
		},
		/* 
		 * 编号：ch-bug-1（2）
		 * bug修复
		 * 同类型bug，因为表格id不同故进行二次修复
		 */
		setCurrent2(row) {
			this.$refs.show_details.setCurrentRow(row);
		},
		/* 
		 * 删除角色
		 * 二次确认
		 * 更新数据
		 */
		deleterole() {
			this.$confirm('确定删除角色?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'error'
			}).then(() => {
				axios.get(
						`./api/Controller.php?ac=deleterole&token=${this.$props.token}&id=${this.realid}&the_story=${this.$props.storyid}`
					)
					.then(response => {
						this.$emit('update:token', response.data.pop());
						this.setCurrent2();
						this.tableData = [];
						this.tableData = response.data[0]
						this.tableData2 = [];
						this.tableData3 = [];
						this.camp = '';
						this.remark = '';
						this.birthday = '';
						this.name = '';
						this.realid = '';
						this.id = '';
						this.sex = '';
						this.atsg = '';
						this.ronum = this.ronum - 1;
						app.$children[1].$children[2].$children[0].form.frolenum = this.ronum
					})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '取消删除'
				});
			});
		},
		/* 
		 * 打开编辑角色
		 * 初始化需要编辑的数据
		 */
		editrole(val) {
			this.$refs.editrole.style.display = "block"
			this.$refs.editrelationship.style.display = "none";
			this.$refs.rmx.style.display = "none"
			this.$refs.role_details.style.display = "none"
			this.$refs.newrole.style.display = "none"
			this.$refs.addrelationship.style.display = "none"
			this.form4.name = val.name
			this.form4.id = val.id
			this.form4.sex = val.sex
			this.form4.atsg = val.atsg
			if (val.lead == "√") {
				this.form4.lead = true
			} else {
				this.form4.lead = false
			}
			this.form4.remarks = val.remarks
			this.form4.birthday = val.birthday
			this.form4.the_story = val.the_story
			axios.get(
					`./api/Controller.php?ac=newroleloding&token=${this.$props.token}&storyid=${this.$props.storyid}`
				)
				.then(response => {
					this.$emit('update:token', response.data.pop());
					this.options3 = response.data[0];
					this.form4.camp = val.camp
				})
				.catch(function(error) {
					console.log(error)
				})
		},
		/*
		 * 提交修改角色
		 * 检测非法数据
		 * 更新数据
		 */
		submiteditrole() {
			//console.log(this.form4)
			if (this.form4.name == "" && this.form4.remarks == "" && this.form4.atsg == "") {
				this.$notify.error({
					title: '错误',
					message: '不能为空！'
				});
			} else {
				let name = this.form4.name.replace(/^[\u4E00-\u9FA5A-Za-z0-9]+$/g,
					""); //过滤合法字符，留下非法字符用以下面进行校验
				let atsg = this.form4.atsg.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g,
					""); //过滤合法字符，留下非法字符用以下面进行校验
				let remark = this.form4.remarks.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g,
					""); //过滤合法字符，留下非法字符用以下面进行校验
				if (name == "" && atsg == "" && remark == "") {
					axios.post(
							`./api/Controller.php?ac=editrole&token=${this.$props.token}&storyid=${this.$props.storyid}`, {
								data: this.form4
							})
						.then(response => {
							this.$emit('update:token', response.data.pop());
							this.tableData = []
							this.tableData = response.data[0]
							this.$notify({
								title: '成功',
								message: '修改成功！',
								type: 'success'
							});
							this.modify_state2 = true;
							let val = {
								name: this.form4.name,
								atsg: this.form4.atsg,
								sex: this.form4.sex,
								id: this.form4.id,
							}
							this.show_details(val)
							this.$refs.editrelationship.style.display = "none";
							this.$refs.rmx.style.display = "block"
							this.$refs.role_details.style.display = "block"
							this.$refs.newrole.style.display = "none"
							this.$refs.addrelationship.style.display = "none"
							this.$refs.editrole.style.display = "none"

						})
						.catch(function(error) {
							console.log(error)
						})
				} else {
					this.$notify.error({
						title: '错误',
						message: '提交非法数据！'
					});
				}
			}
		},
		/*
		 * 取消编辑角色
		 * 检测是否有未保存数据
		 */
		editreturnrole() {
			if (this.modify_state2) {
				this.$refs.editrelationship.style.display = "none";
				this.$refs.rmx.style.display = "block"
				this.$refs.role_details.style.display = "block"
				this.$refs.newrole.style.display = "none"
				this.$refs.addrelationship.style.display = "none"
				this.$refs.editrole.style.display = "none"
			} else {
				this.$confirm('您可能有为保存的数据，确实返回?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$refs.editrelationship.style.display = "none";
						this.$refs.rmx.style.display = "block"
						this.$refs.role_details.style.display = "block"
						this.$refs.newrole.style.display = "none"
						this.$refs.addrelationship.style.display = "none"
						this.$refs.editrole.style.display = "none"
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '取消提交'
						});
					});
			}
		},
		/*
		 * 打开添加属性
		 */
		addattribute() {
			if (this.$props.storyid == '') {
				this.$notify.error({
					title: '错误',
					message: '请先打开一个故事！'
				});
			} else if (this.realid == '') {
				this.$notify.error({
					title: '错误',
					message: '请先选中一个角色！'
				});
			} else {
				this.$refs.editrelationship.style.display = "none";
				this.$refs.rmx.style.display = "none"
				this.$refs.role_details.style.display = "none"
				this.$refs.newrole.style.display = "none"
				this.$refs.addrelationship.style.display = "none"
				this.$refs.editrole.style.display = "none"
				this.$refs.addattribute.style.display = "block"
			}
		},
		/*
		 * 提交添加属性
		 * 检测非法数据
		 * 更新数据
		 */
		submit_attribute() {
			if (this.form5.attributename == '' && this.form5.content == '') {
				this.$notify.error({
					title: '错误',
					message: '不能为空！'
				});
			} else {
				let attributename = this.form5.attributename.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g, "")
				let content = this.form5.content.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g, "")
				if (attributename == "" && content == "") {
					axios.post(
							`./api/Controller.php?ac=insterattribute&token=${this.$props.token}&id=${this.realid}`, {
								data: this.form5
							})
						.then(response => {
							if (response.data) {
								this.$emit('update:token', response.data.pop());
								this.tableData3 = [];
								this.tableData3 = response.data[0];
								this.$notify({
									title: '成功',
									message: '添加成功！',
									type: 'success'
								});
								this.form5.attributename = '';
								this.form5.content = '';
								this.modify_state3 = true;
								this.$refs.editrelationship.style.display = "none";
								this.$refs.rmx.style.display = "block"
								this.$refs.role_details.style.display = "block"
								this.$refs.newrole.style.display = "none";
								this.$refs.addrelationship.style.display = "none";
								this.$refs.editrole.style.display = "none";
								this.$refs.addattribute.style.display = "none";
							} else {
								this.$notify.error({
									title: '错误',
									message: '不能重复添加！'
								});
							}
						})
						.catch(function(error) {
							Errorreport(error);
						})
				} else {
					this.$notify.error({
						title: '错误',
						message: '提交数据非法！'
					});
				}
			}
		},
		/*
		 * 返回添加属性
		 * 二次确认
		 */
		returnroleym() {
			if (this.form5.attributename == '' && this.form5.content == '' || this.modify_state3) {
				this.modify_state3 = false;
				this.$refs.editrelationship.style.display = "none";
				this.$refs.rmx.style.display = "block";
				this.$refs.role_details.style.display = "block";
				this.$refs.newrole.style.display = "none";
				this.$refs.addrelationship.style.display = "none";
				this.$refs.editrole.style.display = "none";
				this.$refs.addattribute.style.display = "none";
			} else {
				this.$confirm('您可能有未保存的数据，确实返回?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.from5.attributename = '';
						this, from5.content = '';
						this.modify_state3 = false;
						this.$refs.editrelationship.style.display = "none";
						this.$refs.rmx.style.display = "block";
						this.$refs.role_details.style.display = "block";
						this.$refs.newrole.style.display = "none";
						this.$refs.addrelationship.style.display = "none";
						this.$refs.editrole.style.display = "none";
						this.$refs.addattribute.style.display = "none";
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '取消提交'
						});
					});
			}
		},
		/*
		 * 打开编辑属性
		 * 初始化需要编辑的数据
		 */
		editattribute(val) {
			if (this.realid == '') {
				this.$notify.error({
					title: '错误',
					message: '请先选中一个角色！'
				});
			} else {
				this.$refs.editrelationship.style.display = "none";
				this.$refs.rmx.style.display = "none";
				this.$refs.role_details.style.display = "none";
				this.$refs.newrole.style.display = "none";
				this.$refs.addrelationship.style.display = "none";
				this.$refs.editrole.style.display = "none";
				this.$refs.addattribute.style.display = "none";
				this.$refs.editattribute.style.display = "block";
				this.form5.id = val.id;
				this.form5.attributename = val.property_name;
				this.form5.content = val.content;
			}
		},
		/*
		 * 提交编辑属性
		 * 检测非法数据
		 * 更新数据
		 */
		submiteditattribute() {
			console.log(this.form5)
			if (this.form5.content == "" || this.form5.attributename == "") {
				this.$notify.error({
					title: '错误',
					message: '不能为空！'
				});
			} else {
				let attributename = this.form5.attributename.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g, "");
				let content = this.form5.content.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g, "");
				if (attributename == "" && content == "") {
					axios.post(
							`./api/Controller.php?ac=submitattribute&token=${this.$props.token}&id=${this.realid}`, {
								data: this.form5
							})
						.then(response => {
							let token = response.data.pop();
							this.$emit('update:token', token);
							this.tableData3 = [];
							this.tableData3 = response.data;
							this.$notify({
								title: '成功',
								message: '修改成功！',
								type: 'success'
							});
							this.$refs.editrelationship.style.display = "none";
							this.$refs.rmx.style.display = "block";
							this.$refs.role_details.style.display = "block";
							this.$refs.newrole.style.display = "none";
							this.$refs.addrelationship.style.display = "none";
							this.$refs.editrole.style.display = "none";
							this.$refs.addattribute.style.display = "none";
							this.$refs.editattribute.style.display = "none";
						})
						.catch(function(error) {
							Errorreport(error);
						})
				} else {
					this.$notify.error({
						title: '错误',
						message: '提交非法数据！'
					});
				}
			}
		},
		/*
		 * 返回编辑属性
		 */
		returnattribute() {
			this.form5.attributename = "";
			this.form5.content = "";
			this.form5.id = "";
			this.$refs.editrelationship.style.display = "none";
			this.$refs.rmx.style.display = "block";
			this.$refs.role_details.style.display = "block";
			this.$refs.newrole.style.display = "none";
			this.$refs.addrelationship.style.display = "none";
			this.$refs.editrole.style.display = "none";
			this.$refs.addattribute.style.display = "none";
			this.$refs.editattribute.style.display = "none";
		},
		/* 
		 * 删除属性
		 * 更新数据
		 */
		deleteattribute() {
			this.$confirm('您确定删除这条属性吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.get(
							`./api/Controller.php?ac=deleteattribute&token=${this.$props.token}&id=${this.realid}&attributeid=${this.form5.id}`
						)
						.then(response => {
							let token = response.data.pop();
							this.$emit('update:token', token);
							this.tableData3 = [];
							this.tableData3 = response.data;
							this.$notify({
								title: '成功',
								message: '删除成功！',
								type: 'success'
							});
							this.$refs.editrelationship.style.display = "none";
							this.$refs.rmx.style.display = "block";
							this.$refs.role_details.style.display = "block";
							this.$refs.newrole.style.display = "none";
							this.$refs.addrelationship.style.display = "none";
							this.$refs.editrole.style.display = "none";
							this.$refs.addattribute.style.display = "none";
							this.$refs.editattribute.style.display = "none";
						})
						.catch(function(error) {
							console.log(error);
						})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消删除'
					});
				});
		}
	}
})
/*
 * 图表组件
 */
Vue.component('chart', {
	template: `<div id="Rc" ref="Rc" class="Rc">
	<iframe src="" frameborder="0" scrolling="no" height="100%" width="100%" class="rolechart" id="rolechart"></iframe>
	</div>`,
	props: {},
	data() {
		return {}
	},
	watch: {},
	methods: {},
})
//路由组件Project_Components
const Project_Components = {
	template: '<div>' +
		'<el-button style="margin-left: 10%; margin-top: 20px;" type="info" @click="StoryOverview()">故事总览</el-button>' +
		'<el-button style="margin-left: 10%; margin-top: 20px;" type="info" @click=New_Story()>新建故事</el-button>' +
		'<el-button style="margin-left: 10%; margin-top: 20px;" type="info" @click=open_story()>打开故事</el-button>' +
		'</div>',
	data() {
		return {

		}
	},
	methods: {
		StoryOverview() {
			document.getElementById('etp').style.display = "none"
			document.getElementById('etpx').style.display = "block"
			document.getElementById('Nstory').style.display = "none"
			document.getElementById('OPstory').style.display = 'none'
		},
		New_Story() {
			document.getElementById('etp').style.display = "none"
			document.getElementById('etpx').style.display = "none"
			document.getElementById('Nstory').style.display = "block"
			document.getElementById('OPstory').style.display = 'none'
		},
		open_story() {
			document.getElementById('etp').style.display = "none"
			document.getElementById('etpx').style.display = "none"
			document.getElementById('Nstory').style.display = "none"
			document.getElementById('OPstory').style.display = 'block'
		}
	}
}
//路由组件role
const role = {
	template: `<div>
		<el-button style="margin-left: 5%; margin-top: 20px;" type="info" @click="role_map()">角色总览图</el-button>
		<el-button style="margin-left: 5%; margin-top: 20px; width: 112px;" type="info" @click=role_chart()>角 色  图 表</el-button>
		</div>`,
	data() {
		return {

		}
	},
	methods: {
		role_map() {
			document.getElementById('rolechart').src = ``;
			document.getElementById('rolechart').style.display = "none";
			document.getElementById('etp').style.display = "none";
			document.getElementById('etpx').style.display = "none";
			document.getElementById('Nstory').style.display = "none";
			document.getElementById('OPstory').style.display = 'none';
			document.getElementById('editrole').style.display="none"
			document.getElementById('rmx').style.display = 'block';
			document.getElementById("rmy").style.display="block";
			document.getElementById('role_details').style.display='block';
			document.getElementById('newrole').style.display="none";
			document.getElementById("addrelationship").style.display="none";
			document.getElementById("editrelationship").style.display="none";
			document.getElementById("editattribute").style.display="none";
			document.getElementById("editrole").style.display="none";
			document.getElementById("addattribute").style.display="none";
			app.$children[2].$children[2].$children[2].$el.style.display = "none";
		},
		test() {
			console.log(this)
			console.log(1111)
		},
		role_chart() {
			if (app.storyid == "") {
				this.$notify.error({
					title: '错误',
					message: '请先打开一个故事！'
				});
			} else {
				if (this.$store.state.Rroleid == null) {
					this.$notify.error({
						title: '错误',
						message: '请选中一个角色！'
					});
				} else {
					document.getElementById('rolechart').src =
						`./D3/index.html?id=${this.$store.state.Rroleid}&ac=RoleChart&Controller=Controller`
					document.getElementById('rolechart').style.display = "block";
					document.getElementById('etp').style.display = "none";
					document.getElementById('etpx').style.display = "none";
					document.getElementById('Nstory').style.display = "none";
					document.getElementById('OPstory').style.display = 'none';
					document.getElementById('rmx').style.display = 'none';
					document.getElementById('editrole').style.display="none"
					document.getElementById("rmy").style.display="none";
					document.getElementById('role_details').style.display='none';
					document.getElementById('newrole').style.display="none";
					document.getElementById("addrelationship").style.display="none";
					document.getElementById("editrelationship").style.display="none";
					document.getElementById("editattribute").style.display="none";
					document.getElementById("editrole").style.display="none";
					document.getElementById("addattribute").style.display="none";
					app.$children[2].$children[2].$children[2].$el.style.display = "block"
				}
			}
		}
	}
}
//路由组件event
const event = {
	template: `<div>
	<el-button style="margin-left: 5%; margin-top: 20px;" type="info" @click="EventMap()">事件总览图</el-button>
	<el-button style="margin-left: 5%; margin-top: 20px; width: 112px;" type="info" @click=EventChart()>事 件  图 表</el-button>
	</div>`,
	data() {
		return {}
	},
	methods: {
		/*
		 * 事件总览图开关
		 */
		EventMap() {
			if (this.$route.path !== "/event") {
				this.$router.push({
					path: '/event'
				})
			}
		},
		/*
		 * 事件图表开关
		 */
		EventChart() {
			if (this.$route.path !== "/EventChart") {
				this.$router.push({
					path: '/EventChart'
				})
			}
		}
	}
}
const EventChart = {
	template: `<div>
	<h1>我是图表</h1>
	
	</div>`,
	data() {
		return {
			EventNum: 0,
		}
	},
	methods: {},
}
const EventMap = {
	template: `<div>
	
	
	<div ref="NewEventDiv" class="NewOrEditEventDiv">
	<h2 style="margin-left:20px;">新建事件</h2>
	<el-form ref="NewEventForm" :model="form" label-width="100px" :rules="rules" class="NewOrEditEvent">
	<el-form-item label="名称："prop="eventname">
	<el-input v-model="form.eventname"  maxlength="10" minlength="0" show-word-limit clearable style="width:250px;"></el-input>
	</el-form-item>
	<el-form-item label="日期：">
	<el-date-picker 
	v-model="form.time"
	type="date"
	value-format="yyyy-MM-dd"
	placeholder="日期"
	style="width: 150px;">
	</el-date-picker>
	</el-form-item>
	<el-form-item label="地点：">
	<el-select v-model="form.place" placeholder="无" style="width:150px;">
	<el-option label="无" value=""></el-option>
	<el-option
	v-for="item in options"
	:key="item.id"
	:label="item.placename"
	:value="item.id">
	</el-option>
	</el-select>
	</el-form-item>
	<el-form-item label="量级：">
	<el-slider v-model="form.magnitude" style="width:350px;" show-input></el-slider>
	</el-form-item>
	<el-form-item label="简介：" prop="BriefIntroduction">
	<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.BriefIntroduction"
	style="width: 350px;" maxlength="300" minlength="0" show-word-limit clearable></el-input>
	</el-form-item>
	<el-button type="primary" @click="SubmitNewEvent" ref="SubmitNewEvent" style="margin-top: 20px; margin-left: 35%;">完成</el-button>
	<el-button type="primary" @click="ReturnEvent" ref="ReturnEvent" style="margin-top: 20px;">返回</el-button>
	</el-form>
	</div>
	
	
	<div ref="EditEventDiv" class="NewOrEditEventDiv">
	<h2 style="margin-left:20px;">编辑事件</h2>
	<el-form ref="EditEventForm" :model="form2" label-width="100px" :rules="rules2" class="NewOrEditEvent">
	<el-form-item label="名称："prop="eventname">
	<el-input v-model="form2.eventname"  maxlength="10" minlength="0" show-word-limit clearable style="width:250px;"></el-input>
	</el-form-item>
	<el-form-item label="日期：">
	<el-date-picker 
	v-model="form2.time"
	type="date"
	value-format="yyyy-MM-dd"
	placeholder="日期"
	style="width: 150px;">
	</el-date-picker>
	</el-form-item>
	<el-form-item label="进度" style="margin-left:220px;margin-top:-60px;">
	<el-switch
	    v-model="form2.PlannedSpeed"
		active-text="√"
		inactive-text="×"
	    active-value="√"
	    inactive-value="×">
	  </el-switch>
	</el-form-item>
	<el-form-item label="地点：">
	<el-select v-model="form2.place" placeholder="无" style="width:150px;">
	<el-option label="无" value=""></el-option>
	<el-option
	v-for="item in options"
	:key="item.id"
	:label="item.placename"
	:value="item.id">
	</el-option>
	</el-select>
	</el-form-item>
	<el-form-item label="量级：">
	<el-slider v-model="form2.magnitude" style="width:350px;" show-input></el-slider>
	</el-form-item>
	<el-form-item label="简介：" prop="BriefIntroduction">
	<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form2.BriefIntroduction"
	style="width: 350px;" maxlength="300" minlength="0" show-word-limit clearable></el-input>
	</el-form-item>
	<el-button type="primary" @click="SubmitEditEvent" ref="SubmitEditEvent" style="margin-top: 20px; margin-left: 35%;">完成</el-button>
	<el-button type="primary" @click="ReturnEditEvent" ref="ReturnEditEvent" style="margin-top: 20px;">返回</el-button>
	</el-form>
	</div>
	
	
	<div ref="NewPoint" class="NewPoint">
	<h2>添加转入</h2>
	<el-form ref="NewPointForm" :model="form3" label-width="100px" class="NewPointForm">
	<el-form-item label="事件：" style="margin-left:20%;">
	<el-select v-model="form3.point" placeholder="无" style="width:150px;">
	<el-option label="无" value=""></el-option>
	<el-option
	v-for="item in options2"
	:key="item.id"
	:label="item.eventname"
	:value="item.id">
	</el-option>
	</el-select>
	</el-form-item>
	<el-button type="primary" @click="SubmitNewPoint" ref="SubmitNewPoint" style="margin-top: 20px; margin-left: 35%;">完成</el-button>
	<el-button type="primary" @click="ReturnNewPoint" ref="ReturnNewPoint" style="margin-top: 20px;">返回</el-button>
	</el-form>
	</div>
	
	<div ref="NewMember" class="NewMember">
	<h2>添加成员</h2>
	<el-form ref="NewMemberForm" :model="form4" label-width="100px" class="NewMemberForm">
	<el-form-item label="角色：" style="margin-left:20%;">
	<el-select v-model="form4.roleid" placeholder="无" style="width:150px;">
	<el-option label="无" value=""></el-option>
	<el-option
	v-for="item in options3"
	:key="item.id"
	:label="item.name"
	:value="item.id">
	</el-option>
	</el-select>
	</el-form-item>
	<el-button type="primary" @click="SubmitNewMember" ref="SubmitNewMember" style="margin-top: 20px; margin-left: 35%;">完成</el-button>
	<el-button type="primary" @click="ReturnNewMember" ref="ReturnNewMember" style="margin-top: 20px;">返回</el-button>
	</el-form>
	</div>
	
	
	<div ref="NewAttribute" class="NewAttribute">
	<h2>添加属性</h2>
	<el-form ref="NewAttributeForm" :model="form5" label-width="100px" class="NewAttributeForm" :rules="rules3">
	<el-form-item label="属性名" style="margin-left:10%;" prop="attributename">
	<el-input v-model="form5.attributename" style="width:250px;" maxlength="10" minlength="0" show-word-limit clearable></el-input>
	</el-form-item>
	<el-form-item label="属性内容" style="margin-left:10%;" prop="attributecontent">
	<el-input v-model="form5.attributecontent" prop="attributecontent" style="width:250px;" maxlength="10" minlength="0" show-word-limit clearable></el-input>
	</el-form-item>
	<el-button type="primary" @click="SubmitNewAttribute" ref="SubmitNewAttribute" style="margin-top: 20px; margin-left: 35%;">完成</el-button>
	<el-button type="primary" @click="" ref="ReturnNewAttribute" style="margin-top: 20px;">返回</el-button>
	</el-form>
	</div>
	
	
	<el-row :gutter="20" ref="Main">
	<el-col :span="16">
	<div class="EventLeft">
	<div class="EventLeftMain">
	<h2>事件总览</h2>
	<p>总数:{{EventNum}}</p>
	<el-table @current-change="ShowEvent" ref="ShowEvent" show-overflow-tooltip="true" :row-class-name="returnindex" :data="tableData" style="width: 600px;" height="500px">
	<el-table-column type="index" label="ID" width="80">
	</el-table-column>
	<el-table-column prop="PlannedSpeed" label="进度" width="85">
	</el-table-column>
	<el-table-column prop="eventname" label="事件名" width="100">
	</el-table-column>
	<el-table-column prop="magnitude" label="量级" width="85">
	</el-table-column>
	<el-table-column prop="time" label="时间" width="100">
	</el-table-column>
	<el-table-column label="操作">
	<template slot-scope="scope">
	<el-button type="primary" icon="el-icon-edit" @click="EditEvent(scope.row)" circle></el-button>
	<el-button type="danger" icon="el-icon-delete" @click="DeleteEvent(scope.row)" circle></el-button>
	</template>
	</el-table-column>
	</el-table>
	<el-button type="primary" @click="OpenNewEvent" ref="NewEvent" style="margin-top: 20px;">新建事件</el-button>
	<el-button type="primary" @click="OpenNewPoint" ref="OpenNewPoint" style="margin-top: 20px;">添加转入</el-button>
	<el-button type="primary" @click="OpenNewMember" ref="OpenNewMember" style="margin-top: 20px;">添加成员</el-button>
	<el-button type="primary" @click="OpenNewAttribute" ref="OpenNewAttribute" style="margin-top: 20px;">添加属性</el-button>
	</div>
	</div>
	</el-col>
	<el-col :span="8">
	<div class="EventRight">
	<p style="width:300px; margin: 0;">名称：{{EventDetails.EventName}}</p>
	<p style="position: absolute; left:70%; top:-4%;">ID：{{EventDetails.id}}</p>
	<p>时间：{{EventDetails.time}}</p>
	<p>地点：{{EventDetails.place}}</p>
	<p>量级：{{EventDetails.magnitude}}</p>
	<el-scrollbar style="height:80px;">
	<p style="width:350px; word-break:break-all; word-wrap:break-word;margin:0;">简介：{{EventDetails.BriefIntroduction}}</p>
	</el-scrollbar>
	<p style="margin-top:-5px;">成员：</p>
	<el-table row-key="id" highlight-current-row  @current-change="editmember" :data="tableData2" style="width: 300px;  position: relative; left: 70px; top: -30px;"height="140px">
	<el-table-column type="index" label="ID" width="50">
	</el-table-column>
	<el-table-column prop="name" label="角色" width="70">
	</el-table-column>
	<el-table-column prop="sex" label="性别">
	</el-table-column>
	<el-table-column prop="lead" label="主角">
	</el-table-column>
	</el-table>
	<p style="margin: 0;padding: 0; margin-top:-20px;">指向：</p>
	<el-table row-key="id" highlight-current-row  @current-change="editpoint" :data="tableData3" style="width: 300px;  position: relative; left: 70px; top: -20px;"height="140px">
	<el-table-column type="index" label="ID" width="50">
	</el-table-column>
	<el-table-column prop="eventname" label="事件名" width="150">
	</el-table-column>
	<el-table-column prop="magnitude" label="量级" width="100">
	</el-table-column>
	</el-table>
	<p style="margin:0;padding:0;">属性：</p>
	<el-table row-key="id" highlight-current-row  @current-change="editattribute" :data="tableData4" style="width: 300px;  position: relative; left: 70px; top: -30px;"height="140px">
	<el-table-column type="index" label="ID" width="50">
	</el-table-column>
	<el-table-column prop="attributename" label="属性名" width="125" :show-overflow-tooltip="true">
	</el-table-column>
	<el-table-column prop="content" label="内容" width="125" :show-overflow-tooltip="true">
	</el-table-column>
	</el-table>
	</div>
	</el-col>
	</el-row>
	</div>`,
	data() {
		return {
			EventNum: "", //事件数
			EventId: "", //事件ID
			/**
			 * 新建事件数据
			 */
			form: {
				eventname: "",
				time: "1900-01-01",
				place: "",
				BriefIntroduction: "",
				magnitude: 0,
				the_story: this.$store.state.storyid,
			},
			/**
			 * 编辑事件数据
			 */
			form2: {
				eventname: "",
				time: "1900-01-01",
				place: "",
				BriefIntroduction: "",
				magnitude: 0,
				the_story: this.$store.state.storyid,
				PlannedSpeed: "",
			},
			/**
			 * 添加转入数据
			 */
			form3: {
				point: "",
			},
			/**
			 * 添加成员数据
			 */
			form4: {
				roleid: "",
			},
			/**
			 * 添加属性数据
			 */
			form5: {
				attributename: '',
				attributecontent: '',
			},
			/**
			 * 新建事件地点列表
			 */
			options: [],
			/**
			 * 添加转入事件列表
			 */
			options2: [],
			/**
			 * 添加成员角色列表
			 */
			options3: [],
			/**
			 * 事件表格
			 */
			tableData: [],
			/**
			 * 成员数据
			 */
			tableData2: [],
			/**
			 * 指向数据
			 */
			tableData3: [],
			/**
			 * 属性数据
			 */
			tableData4: [],
			/**
			 * 事件详情
			 */
			EventDetails: {
				id: "",
				EventName: "",
				time: "",
				place: "",
				BriefIntroduction: "",
				magnitude: "",
			},
			/**
			 * 新建事件验证方法
			 */
			rules: {
				eventname: [{
						required: true,
						message: "不能为空！",
						trigger: "blur",
					}, {
						min: 0,
						max: 10,
						message: '最长10个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文，和中文标点符号!',
						trigger: 'change'
					},
				],
				BriefIntroduction: [{
						min: 0,
						max: 300,
						message: '最长300个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文，和中文标点符号!',
						trigger: 'change'
					},
				],
			},
			/**
			 * 编辑事件验证规则
			 */
			rules2: {
				eventname: [{
						required: true,
						message: "不能为空！",
						trigger: "blur",
					}, {
						min: 0,
						max: 10,
						message: '最长10个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文，和中文标点符号!',
						trigger: 'change'
					},
				],
				BriefIntroduction: [{
						min: 0,
						max: 300,
						message: '最长300个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文，和中文标点符号!',
						trigger: 'change'
					},
				],
			},
			/**
			 * 添加属性验证规则
			 */
			rules3:{
				attributename: [{
						required: true,
						message: "不能为空！",
						trigger: "blur",
					}, {
						min: 0,
						max: 10,
						message: '最长10个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文，和中文标点符号!',
						trigger: 'change'
					},
				],
				attributecontent: [{
						required: true,
						message: "不能为空！",
						trigger: "blur",
					}, {
						min: 0,
						max: 10,
						message: '最长10个字符',
						trigger: 'change'
					},
					{
						pattern: "^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$",
						message: '只能输入中文、英文，和中文标点符号!',
						trigger: 'change'
					},
				],
			},
		}
	},
	methods: {
		/**
		 * 依赖方法/bug修复
		 */
		returnindex({
			row,
			rowIndex
		}) {
			row.index = rowIndex + 1;
		},
		bug_1(row) {
			this.$refs.ShowEvent.setCurrentRow(row);
		},
		/**
		 * 事件详情
		 * @param  val 事件详情的部分数据以及索引
		 */
		ShowEvent(val) {
			if (val != null) {
				this.EventDetails.id = val.index;
				this.EventId = val.id;
				this.EventDetails.EventName = val.eventname;
				this.EventDetails.time = val.time;
				this.EventDetails.magnitude = val.magnitude;
				this.EventDetails.BriefIntroduction = val.BriefIntroduction;
				axios.get(`./api/Controller2.php?ac=ShowEvent&id=${val.id}&token=${this.$store.state.token}`)
					.then(response => {
						this.EventDetails.place = response.data.place;
						this.tableData2 = response.data.tableData2;
						this.tableData3 = response.data.tableData3;
						this.tableData4 = response.data.tableData4;
						this.$store.commit('updataToken', response.data.token);
					})
					.catch(function(error) {
						console.log(error);
					})
			}
		},
		/**
		 * 打开新建事件 
		 */
		OpenNewEvent() {
			if (this.$store.state.storyid != null) {
				this.$refs.NewEventDiv.style.display = "block";
				this.$refs.Main.$el.style.display = "none";
				axios.get(
						`./api/Controller2.php?ac=lodingoptions&id=${this.$store.state.storyid}&token=${this.$store.state.token}`
					)
					.then(response => {
						this.options = response.data[0];
						this.$store.commit('updataToken', response.data[1]);
					})
					.catch(function(error) {
						console.log(error);
					})
			} else {
				this.$notify.error({
					title: '错误',
					message: '请先打开一个故事！'
				});
			}
		},
		/**
		 * 提交新建事件
		 */
		SubmitNewEvent() {
			if (this.form.eventname === "") {
				this.$notify.error({
					title: '错误',
					message: '不能为空！'
				});
			} else {
				let eventname = this.form.eventname.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g, "");
				let BriefIntroduction = this.form.BriefIntroduction.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g,
					"");
				if (eventname === "" && BriefIntroduction === "") {
					axios.post(
							`./api/Controller2.php?ac=SubmitNewEvent&id=${this.$store.state.storyid}&token=${this.$store.state.token}`, {
								data: this.form,
							})
						.then(response => {
							this.bug_1();
							this.tableData = response.data[0];
							this.$store.commit('updataEventTable', response.data[0]);
							this.$store.commit('updataToken', response.data[1]);
							this.EventNum = response.data[0].length;
							this.$refs.NewEventDiv.style.display = "none";
							this.$refs.Main.$el.style.display = "block";
							this.form.eventname = "";
							this.form.place = "";
							this.form.BriefIntroduction = "";
							this.form.magnitude = 0;
							this.form.time = "1900-01-01";
							this.$notify({
								title: '成功',
								message: '新建成功！',
								type: 'success'
							});
						})
						.catch(function(error) {
							console.log(error);
						})
				} else {
					this.$notify.error({
						title: '错误',
						message: '提交非法数据！'
					});
				}
			}
		},
		/**
		 * 新建事件返回
		 */
		ReturnEvent() {
			if (this.form.eventname == "" && this.form.place == "" && this.form.BriefIntroduction == "") {
				this.$refs.NewEventDiv.style.display = "none";
				this.$refs.Main.$el.style.display = "block";
			} else {
				this.$confirm('您有可能有未保存的数据，是否返回?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.bug_1();
						this.form.eventname = "";
						this.form.place = "";
						this.form.BriefIntroduction = "";
						this.form.magnitude = 0;
						this.form.time = "1900-01-01";
						this.$refs.NewEventDiv.style.display = "none";
						this.$refs.Main.$el.style.display = "block";
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '取消返回'
						});
					});
			}
		},
		/**
		 * 删除事件
		 * @param val 需要删除的数据
		 */
		DeleteEvent(val) {
			this.$confirm('确定删除此事件?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.get(
							`./api/Controller2.php?ac=DeleteEvent&id=${val.id}&token=${this.$store.state.token}&storyid=${this.$store.state.storyid}`
						)
						.then(response => {
							this.bug_1();
							this.tableData = response.data[0];
							this.EventNum = response.data[0].length;
							this.$store.commit('updataEventTable', response.data[0]);
							this.$store.commit('updataToken', response.data[1]);
						})
						.catch(function(error) {
							console.log(error)
						})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消删除'
					});
				});
		},
		/**
		 * 打开编辑事件
		 * @param  val 需要编辑的数据
		 */
		EditEvent(val) {
			if (this.options == "") {
				axios.get(
						`./api/Controller2.php?ac=lodingoptions&id=${this.$store.state.storyid}&token=${this.$store.state.token}`
					)
					.then(response => {
						this.options = response.data[0];
						this.$store.commit('updataToken', response.data[1]);
					})
					.catch(function(error) {
						console.log(error);
					})
			}
			this.bug_1();
			this.$refs.EditEventDiv.style.display = "block";
			this.$refs.NewEventDiv.style.display = "none";
			this.$refs.Main.$el.style.display = "none";
			this.EventId = val.id;
			this.form2.eventname = val.eventname;
			this.form2.time = val.time;
			this.form2.place = val.place;
			this.form2.BriefIntroduction = val.BriefIntroduction;
			this.form2.PlannedSpeed = val.PlannedSpeed;
			this.form2.magnitude = parseInt(val.magnitude);
		},
		/**
		 * 提交编辑事件
		 */
		SubmitEditEvent() {
			if (this.form2.eventname === "") {
				this.$notify.error({
					title: '错误',
					message: '不能为空！'
				});
			} else {
				let eventname = this.form.eventname.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g, "");
				let BriefIntroduction = this.form.BriefIntroduction.replace(/^[\u4E00-\u9FA5A-Za-z0-9，。！《》？]+$/g,
					"");
				if (eventname === "" && BriefIntroduction === "") {
					axios.post(
							`./api/Controller2.php?ac=SubmitEditEvent&id=${this.$store.state.storyid}&token=${this.$store.state.token}&EventId=${this.EventId}`, {
								data: this.form2,
							})
						.then(response => {
							this.tableData = response.data[0];
							this.$store.commit('updataEventTable', response.data[0]);
							this.$store.commit('updataToken', response.data[1]);
							this.EventNum = response.data[0].length;
							this.$refs.EditEventDiv.style.display = "none";
							this.$refs.Main.$el.style.display = "block";
							let val = {
								eventname: this.form2.eventname,
								place: this.form2.place,
								time: this.form2.time,
								magnitude: this.form2.magnitude,
								BriefIntroduction: this.form2.BriefIntroduction,
								id: this.EventId,
							};
							this.ShowEvent(val);
							this.form2.eventname = "";
							this.form2.place = "";
							this.form2.BriefIntroduction = "";
							this.form2.magnitude = 0;
							this.form2.time = "1900-01-01";
							this.$notify({
								title: '成功',
								message: '编辑成功！',
								type: 'success'
							});
						})
						.catch(function(error) {
							console.log(error);
						})
				} else {
					this.$notify.error({
						title: '错误',
						message: '提交非法数据！'
					});
				}
			}
		},
		/**
		 * 编辑事件返回
		 */
		ReturnEditEvent() {
			this.$refs.EditEventDiv.style.display = "none";
			this.$refs.NewEventDiv.style.display = "none";
			this.$refs.Main.$el.style.display = "block";
		},
		/**
		 * 打开新建转入
		 */
		OpenNewPoint() {
			if (this.$store.state.storyid != null) {
				if (this.EventId != "") {
					this.$refs.Main.$el.style.display = "none";
					this.$refs.NewPoint.style.display = "block";
					axios.get(
							`./api/Controller2.php?ac=Pointloding&id=${this.$store.state.storyid}&token=${this.$store.state.token}&EventId=${this.EventId}`
						)
						.then(response => {
							this.options2 = response.data[0];
							this.$store.commit('updataToken', response.data[1]);
						})
						.catch(function(error) {
							console.log(error)
						})
				} else {
					this.$notify.error({
						title: '错误',
						message: '请选中一个事件！'
					});
				}
			} else {
				this.$notify.error({
					title: '错误',
					message: '请先打开一个故事！'
				});
			}
		},
		/**
		 * 提交新转入
		 */
		SubmitNewPoint() {
			axios.post(
					`./api/Controller2.php?ac=SubmitNewPoint&token=${this.$store.state.token}&EventId=${this.EventId}`, {
						data: this.form3,
					})
				.then(response => {
					console.log(response);
					this.tableData3 = response.data[0];
					this.$store.commit('updataToken', response.data[1]);
					this.$refs.Main.$el.style.display = "block";
					this.$refs.NewPoint.style.display = "none";
					this.$notify({
						title: '成功',
						message: '添加成功！',
						type: 'success'
					});
				})
				.catch(function(error) {
					console.log(error);
				})
		},
		/**
		 * 添加转入返回
		 */
		ReturnNewPoint() {
			this.$refs.Main.$el.style.display = "block";
			this.$refs.NewPoint.style.display = "none";
			this.form3.point = "";
		},
		/**
		 * 打开添加成员
		 */
		OpenNewMember() {
			if (this.$store.state.storyid != null) {
				if (this.EventId != "") {
					this.$refs.NewMember.style.display = "block";
					this.$refs.Main.$el.style.display = "none";
					axios.get(
							`./api/Controller2.php?ac=MemberLoding&token=${this.$store.state.token}&EventId=${this.EventId}&storyid=${this.$store.state.storyid}`
						)
						.then(response => {
							this.options3 = response.data[0];
							this.$store.commit('updataToken', response.data[1]);
						})
						.catch(function(error) {
							console.log(error);
						})
				} else {
					this.$notify.error({
						title: '错误',
						message: '请选中一个事件！'
					});
				}
			} else {
				this.$notify.error({
					title: '错误',
					message: '请先打开一个故事！'
				});
			}
		},
		/**
		 * 提交添加成员
		 */
		SubmitNewMember() {
			console.log(this.form4);
			axios.post(
					`./api/Controller2.php?ac=SubmitNewMember&token=${this.$store.state.token}&EventId=${this.EventId}&storyid=${this.$store.state.storyid}`, {
						data: this.form4,
					})
				.then(response => {
					this.tableData2 = response.data[0];
					this.$store.commit('updataToken', response.data[1]);
					this.$refs.NewMember.style.display = "none";
					this.$refs.Main.$el.style.display = "block";
					this.$notify({
						title: '成功',
						message: '添加成功！',
						type: 'success'
					});
				})
				.catch(function(error) {
					console.log(error);
				})
		},
		/**
		 * 添加成员返回
		 */
		ReturnNewMember() {
			this.$refs.Main.$el.style.display = "block";
			this.$refs.NewMember.style.display = "none";
			this.form4.roleid = "";
		},
		/**
		 * 打开添加属性
		 */
		OpenNewAttribute() {
			if (/*this.$store.state.storyid != null*/true) {
				if (/*this.EventId != ""*/true) {
					this.$refs.Main.$el.style.display="none";
					this.$refs.NewAttribute.style.display="block";
				} else {
					this.$notify.error({
						title: '错误',
						message: '请选中一个事件！'
					});
				}
			} else {
				this.$notify.error({
					title: '错误',
					message: '请先打开一个故事！'
				});
			}
		},
		SubmitNewAttribute(){
			
		},
		editmember(val) {
			console.log(val);
		},
		editpoint(val) {
			console.log(val);
		},
		editattribute(val) {
			console.log(val);
		}
	},
	created: function() {
		setTimeout(() => {
			this.tableData = this.$store.state.EventTable;
			this.EventNum = this.tableData.length;
		}, 200)
	},
}
//Vue-Router路径配置
const routes = [{
		path: '/Project_Components',
		component: Project_Components,
		props: true,
	},
	{
		path: '/role',
		component: role,
		props: true,
	},
	{
		path: '/event',
		components: {
			default: event,
			content: EventMap
		}
	},
	{
		path: '/EventChart',
		components: {
			default: event,
			content: EventChart
		}
	}
]
//实例化router对象
const router = new VueRouter({
	routes
})
